<template>

<div id="app">
 <div class="big">
        <!-- 头部 -->
        <div class="heade">
            <div class="nav">
                <a @click="fn"><img src="../assets/img/教育APP切图/未标题-1.png"></a>
                <p>设置</p>
            </div>
        </div>
        <!-- 身体 -->
        <div class="st">
            <div class="st1">
                <div class="st11">
                    <h3>手机号</h3>
                    <p class="st15">{{num}} <i class="iconfont icon-right"></i></p>
                </div>
                <div class="st12">
                    <h3>接收推送消息</h3>
                    <div>
                        <p></p>
                    </div>
                </div>
            </div>
            <div class="st1">
                <div class="st11">
                    <h3>通用</h3>
                    <p><i class="iconfont icon-right"></i></p>
                </div>
                <div class="st13">
                    <h3>联系我们</h3>
                    <div>
                    <p><i class="iconfont icon-right"></i></p>
                    </div>
                </div>
            </div>
            <div class="st2">
               
                    <h3>通用</h3>
                    <p>29.51M</p>
                
            </div>

        </div>
        <!-- 尾部 -->
        <button @click="fn2">退出登录</button>
        
    </div>
    <my-tip :text='text' v-show="$store.state.flag">
        
        </my-tip>
  </div>
</template>

<script>
import {listDate} from '@/api/setUp';
import myTip from '@/components/myTip.vue'

export default {
  name: 'setUp',
  components: {
      myTip
  },
  data() {
      return {
          flag:0,
          num:'',
          text:''
      }
  },
  mounted() {
      if (this.$store.state.user) {
          this.num=JSON.parse(sessionStorage.getItem('user')).phone
      } else{
          this.num=''
      }
  },
  methods:{
      fn(){
        this.$router.go(-1)
      },
       fn2(){
           if (this.$store.state.user) {
                           listDate().then((res)=>{
                console.log(res);
            if(res.success === "退出成功"){
                sessionStorage.removeItem("user"),
                this.text=res.success
                this.$store.state.user='',
                this.$store.state.flag=1
                  setTimeout(() => {
                        this.$router.push({
                        path:'/myIndex',
                        name:'首页'
                    }),
                    this.$store.state.flag=0
                    }, 2000);
    }
  }).catch(err=>{
      console.log(err);
    })
           }else{
               this.text='未登录'
               this.$store.state.flag=1
                  setTimeout(() => {
                    this.$store.state.flag=0
                    }, 1000);
           }
  },
  }
}
</script>
<style lang="scss" scoped>
.big{
    height: 100vh;
    .heade {
    width: 100%;
    padding: 2rem;
}

.nav {
    width: 40rem;
    height: 8.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
    font-size: 3.6rem;
}

.nav img {
    width: 3.7rem;
    height: 2.4rem;
}

.nav a {
    display: block;
    width: 3.7rem;
    height: 2.4rem;
}


/* st */

.st {
    width: 100%;
    background: #f5f5f5;
    font-size: 3rem;
    overflow: hidden;
}

.st>div {
    width: 100%;
    margin: 2rem 0;
}

.st p {
    color: #999;
}

.st1 {
    height: 17.6rem;
    background: #fff;
    padding: 0 2rem;
}

.st11,
.st12,
.st13 {
    width: 100%;
    height: 8.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.st11 {
    border-bottom: .1rem solid #ccc;
}

.st12>div {
    width: 6.8rem;
    height: 4.2rem;
    border-radius: 3rem;
    background: #2dd328;
    line-height: 4.2rem;
    position: relative;
}

.st12>div>p {
    width: 3.4rem;
    height: 4rem;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: 0;
    top: 0;
}

.st2 {
    width: 100%;
    background: #fff;
    height: 8.8rem;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* 尾部 */

button {
    width: 100%;
    height: 8.8rem;
    background: #145aee;
    font-size: 3rem;
    color: #fff;
    position: fixed;
    bottom: 0;
}
  
}

</style>